<template>
  <el-dialog :title="title" :visible="show" :before-close="cancel">
    <el-form label-width="120px" :model="form" ref="form" :rules="rules">
      <el-form-item label="所属公司ID" prop="companyId">
        <el-input type="number"   v-model="form.companyId" />
      </el-form-item>
      <el-form-item label="组织机构名称" prop="deptName">
        <el-input v-model="form.deptName" />
      </el-form-item>
      <el-form-item label="上级组织机构ID" prop="deptPId">
        <el-input type="number" v-model="form.deptPId" />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="cancel" icon="el-icon-close">取消</el-button>
      <el-button type="primary" icon="el-icon-check" @click="submit" :loading="loading"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue, Watch } from "vue-property-decorator";
// lib
// components & widgets
// config
// script
// controller & service
import { addDeptService, updateDeptService } from "@/biz/dept/service";
// interface
import { DeptDto } from "@/biz/dept/model";
import logUtils from "@/utils/logUtils";
// 其它

@Component
export default class EditModal extends Vue {
  @Prop(Boolean) show!: boolean;
  @Prop(Object) info!: DeptDto | null;
  title = "";
  loading = false;
  form: {
    companyId: string;
    deptName: string;
    deptPId: string;
  } = {
    companyId: "",
    deptName: "",
    deptPId: "",
  };
  rules = {
    companyId: [{ required: true, message: "请输入所属公司ID" }],
    deptName: [{ required: true, message: "请输入组织机构名称" }],
    deptPId: [{ required: true, message: "请输入上级组织机构ID" }],
  };
  @Emit("close")
  cancel() {
    return false;
  }
  @Emit("close")
  ok() {
    return true;
  }
  @Watch("show")
  onChangeValue(newVal: boolean) {
    if (newVal) {
      logUtils.log(123);
      const form: any = this.$refs.form;
      form && form.resetFields();
      this.title = this.info ? "编辑菜单" : "添加菜单";
      // 设置简单值
      this.form.companyId = this.info?.companyId || "";
      this.form.deptName = this.info?.deptName || "";
      this.form.deptPId = this.info?.deptPId || "";
      // 设置复杂值
      if (this.info) {
        // TODO
      }
    }
  }
  submit() {
    const form: any = this.$refs.form;
    form.validate((valid: boolean) => {
      if (!valid) return;
      if (this.info) {
        this.edit();
      } else {
        this.add();
      }
    });
  }
  async add() {
    this.loading = true;
    const result = await addDeptService({
      deptName: this.form.deptName.trim(),
      companyId: this.form.companyId.trim(),
      deptPId: this.form.deptPId,
    });
    this.loading = false;
    // 成功
    if (result.payload) {
      this.$message.success("添加成功");
      this.ok();
    }
    // 失败和异常
  }
  async edit() {
    if (!this.info) return;
    this.loading = true;
    const result = await updateDeptService({
      deptId: this.info.deptId,
      deptName: this.form.deptName.trim(),
      deptPId: this.form.deptPId.trim(),
      companyId: this.form.companyId.trim(),
    });
    this.loading = false;
    // 成功
    if (result.payload) {
      this.$message.success("更新成功");
      this.ok();
    }
    // 失败和异常
  }
}
</script>

<style lang="scss"></style>
